<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Hello, World</title>
        <style type="text/css">
            html, body, #container{
                height:100%;
                margin:0px;
                overflow: hidden;
                font-family: "微软雅黑";
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=CqZ8bF7LBRPknaP7WxTGzjIGkCUqODMr"></script>
        <script type="text/javascript">
            var map = new BMap.Map("container");                // 创建地图实例
            var gpsPoint = new BMap.Point(113.300372, 23.015281); // 创建点坐标
            map.centerAndZoom(gpsPoint, 15);                    // 初始化地图，设置中心点坐标和地图级别

            map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT}));       // 地图平移缩放控件
            map.addControl(new BMap.ScaleControl());            // 比例尺
            var geo = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
            map.addControl(geo);      // 定位对象
            // 定位成功
            geo.addEventListener('locationSuccess', function(e){
               map.removeControl(testMarker);
            });

            // 定位失败
            geo.addEventListener('locationError', function(e){
               alert('locationError');
            });

            map.addControl(new BMap.MapTypeControl());          // 添加地图类型控件
            map.enableScrollWheelZoom(true);                    // 开启鼠标滚轮缩放

            // var gpsMarker = new BMap.Marker(gpsPoint);
            // map.addOverlay(gpsMarker);                             // 添加 GPS marker
            // var gpsLabel = new BMap.Label("未转换的 GPS 坐标（错误）", {offset: new BMap.Size(20, -10)});
            // gpsMarker.setLabel(gpsLabel);                             // 添加 GPS label

            // 坐标转换
            // translateCallback = function(data){
            //     console.log(data);
            //     if(data.status === 0){
            //         var marker = new BMap.Marker(data.points[0]);
            //         map.addOverlay(marker);
            //         var label = new BMap.Label("转换后的百度坐标（正确）", {offset: new BMap.Size(20, -10)});
            //         marker.setLabel(label);     // 添加百度 label
            //         map.setCenter(data.points[0]);
            //     }
            // }
            // setTimeout(function(){
            //     var convertor = new BMap.Convertor();
            //     var pointArr = [];
            //     pointArr.push(gpsPoint);
            //     convertor.translate(pointArr, 1, 5, translateCallback);
            // }, 1000);

            var testMarker = new BMap.Marker(gpsPoint);
            testMarker.enableDragging();
            map.addOverlay(testMarker);
            var defaultLabel = new BMap.Label("default", {offset: new BMap.Size(20, -10)});
            testMarker.setLabel(defaultLabel);

            var geoc = new BMap.Geocoder();
            testMarker .addEventListener('click', function(e){
                var opts = {
                    width: 250,
                    height: 100,
                    title: "地址信息"
                }
                geoc.getLocation(e.target.point, function(rs){
                    var addComp = rs.addressComponents;
                    var content = addComp.province+ ', '+ addComp.city+ ', '+ addComp.district+ ', '+ addComp.street+ ', '+ addComp.streetNumber;
                    var infoWindow = new BMap.InfoWindow(content, opts);
                    map.openInfoWindow(infoWindow, e.target.point);
                });
            });
            testMarker.addEventListener('dragstart', function(e){
                console.log("开始位置："+ e.point.lng+ "，"+ e.point.lat);
            });
            testMarker.addEventListener('dragend', function(e){
                console.log("停止位置："+ e.point.lng+ "，"+ e.point.lat);
            });
            map.addEventListener('click', function(e){
                // var point = e.point;
                // var opts = {
                //     width: 250,
                //     height: 100,
                //     title: "地址信息"
                // }
                // geoc.getLocation(point, function(rs){
                //     var addComp = rs.addressComponents;
                //     var content = addComp.province+ ', '+ addComp.city+ ', '+ addComp.district+ ', '+ addComp.street+ ', '+ addComp.streetNumber;
                //     var infoWindow = new BMap.InfoWindow(content, opts);
                //     map.openInfoWindow(infoWindow, e.point);
                // });
            });
        </script>
    </body>
</html>